<template>
	<div class="userInfoView">
		<div class="userInfo flex align-center marginAuto justify-between">
			账号： <el-input style="width: 300px;" v-model="info.number" placeholder="请输入账号"></el-input>
		</div>
		<div class="userInfo flex align-center marginAuto justify-between" style="margin-top: 20px;">
			密码： <el-input show-password style="width: 300px;" v-model="info.password" placeholder="请输入密码"></el-input>
		</div>
		<div class="userInfo flex align-center marginAuto justify-between" style="margin-top: 20px;">
			电话： <el-input style="width: 300px;" v-model="info.mobile" placeholder="请输入账号"></el-input>
		</div>
        <div class="userInfo flex align-center marginAuto justify-between" style="margin-top: 20px;">
            状态：
            <el-radio v-model="info.status" label="1">启用</el-radio>
            <el-radio v-model="info.status" label="2">禁用</el-radio>
        </div>
		<div class="userInfo flex justify-between marginAuto" style="margin-top: 30px;">
			头像上传： 
			<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :limit="1"
				:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
				<i class="el-icon-plus"></i>
			</el-upload>
		</div>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<div class="flex align-center marginAuto justify-around">
			<el-button @click="submit" class="userInfo" type="primary" style="color: #FFFFFF;">确认</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'adminUserAdd',
		data() {
			return {
				info: {},
				dialogImageUrl: '',
				dialogVisible: false
			}
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			submit(){
				
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.userInfoView {
		.userInfo {
			width: 420px;
			color: gray;
			font-size: 22px;
			margin-top: 100px;
		}
	}
</style>
